<template>
  <div class="md-container">
    <div class="editor-section">
      <Editor
          v-model="markdownInput"
          class="markdown-input"
          ref="editorRef"
        />
    </div>
   
    <div class="preview-section">
      <PreView :markdown="markdownInput" ref="previewRef"></PreView>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Editor from './components/Editor.vue'
import PreView from './components/PreView.vue'

const markdownInput = ref('')
const editorRef = ref(null)

</script>

<style scoped>
.md-container {
  display: flex;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.editor-section {
  flex: 1;
  border-right: 1px solid #ddd;
  height: 100vh;
  width: 50%;
  overflow: hidden;
}

.preview-section {
  flex: 1;
  height: 100vh;
  width: 50%;
  overflow: auto;
}



</style>
